<nz-row>
  <div class="searchItem">
    <label for="templateName">应用名称</label>
    <input id="templateName" nz-input placeholder="请输入应用名称" [(ngModel)]="query.name"/>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="add()">添加</button>
</nz-row>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.current"
  [(nzPageSize)]="query.size"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">应用名称</th>
    <th nzAlign="center">企业</th>
    <th nzAlign="center">应用图标</th>
    <th nzAlign="center">应用介绍</th>
    <th nzAlign="center">支付通道比例</th>
    <th nzAlign="center">分成比例</th>
    <th nzAlign="center">运行状态</th>
    <th nzAlign="center">创建时间</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td nzAlign="center">{{ data['appName'] }}</td>
    <td nzAlign="center">{{ data['devName'] }}</td>
    <td nzAlign="center"><img nz-image width="40px" height="40px" *ngIf="data['appLogo']" [nzSrc]="data['appLogo']" alt=""/></td>
    <td nzAlign="center">{{ data['appInfo'] }}</td>
    <td nzAlign="center">{{ data['rate'] }}%</td>
    <td nzAlign="center">{{ data['divideRate'] }}%</td>
    <td nzAlign="center">{{ data['status'] === 0 ? '正常' : data['status'] }}</td>
    <td nzAlign="center">{{ data['createTime'] }}</td>
    <td nzAlign="center">
      <a (click)="view(data)">查看</a>
      <a (click)="edit(data)">编辑</a>
      <a style="color: #F56C6C"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.operationType" (nzOnCancel)="handleModalCancel()"
          [nzMaskClosable]="modal.operationType==='查看'"
          [nzOkLoading]="modal.loading" [nzOkText]="modal.operationType==='查看'?null:'保存'"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="name"><span>*</span>应用名称:</label>
      <input id="name" nz-input placeholder="请输入应用名称" [(ngModel)]="formData.appName"
             [disabled]="modal.operationType==='查看'" [maxLength]="24"/>
    </nz-row>
<!--    <nz-row class="modalRow">-->
<!--      <label for="serial"><span>*</span>应用编号:</label>-->
<!--      <input id="serial" nz-input placeholder="请输入应用编号" [(ngModel)]="form.serial"/>-->
<!--    </nz-row>-->
    <nz-row class="modalRow">
      <label for="devId"><span>*</span>企业:</label>
      <nz-select id="devId" [(ngModel)]="formData.devId" nzPlaceHolder="请选择企业" [nzBackdrop]="true" [disabled]="modal.operationType==='查看'" nzShowSearch>
        <nz-option [nzValue]="app.id" [nzLabel]="app.comName" *ngFor="let app of companyOptions"></nz-option>
      </nz-select>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.appLogo">
      <label>应用图标:</label>
      <div class="image" *ngIf="formData.appLogo">
        <div class="btnRow">
          <i nz-icon nzType="eye" nzTheme="outline" (click)="previewImage(formData.appLogo)"></i>
          <i nz-icon nzType="delete" nzTheme="outline" (click)="removeOptionImage(formData)" *ngIf="modal.operationType!=='查看'"></i>
        </div>
        <img [src]="formData.appLogo" alt="">
      </div>
      <div class="uploadFile" *ngIf="!formData.appLogo&&modal.operationType!=='查看'">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        <input type="file" (change)="fileChange($event,formData)">
      </div>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.appInfo">
      <label for="appInfo">应用介绍:</label>
      <input id="appInfo" nz-input placeholder="请输入应用介绍" [disabled]="modal.operationType==='查看'" [maxLength]="256" [(ngModel)]="formData.appInfo"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.rate">
      <label for="payRatio">支付通道比例:</label>
      <nz-input-group nzAddOnAfter="%" style="width: 250px">
        <input id="payRatio" nz-input placeholder="请输入支付通道比例" type="number" [disabled]="modal.operationType==='查看'" [maxLength]="8" [(ngModel)]="formData.rate"/>
      </nz-input-group>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.divideRate">
      <label for="incomeRatio">分成比例:</label>
      <nz-input-group nzAddOnAfter="%" style="width: 250px">
      <input id="incomeRatio" nz-input placeholder="请输入分成比例" type="number" [disabled]="modal.operationType==='查看'" [maxLength]="8" [(ngModel)]="formData.divideRate"/>
      </nz-input-group>
    </nz-row>
  </ng-container>
</nz-modal>
